<!-- 从业者-我的-收件地址 -->
<template>
	<view class="profile-container">

		<!-- picker弹窗 -->
		<u-picker v-model="pickerShow" :mode="mode"  @confirm="confirm"></u-picker>


		<!-- 信息列表 -->
		<view class="info-list">
			<!-- 负责人姓名 -->
			<view class="info-item">
				<text class="info-label">收件人</text>
				<u-input v-model="profileInfo.name" placeholder="请输入收件人姓名" input-align="right" />
			</view>


			<!-- 职务/岗位 -->
			<view class="info-item">
				<text class="info-label">手机号</text>
				<u-input v-model="profileInfo.phone" placeholder="请输入手机号" input-align="right" />
			</view>


			<!-- 所在地区 -->
			<view class="form-section">
				<u-form-item label="所在地区" prop="selectRegion" label-width="240">
					<u-input v-model="profileInfo.selectRegion" placeholder="请选择所在地区" clearable @click="showChange('region')" input-align="right" />
				</u-form-item>
			</view>

			<!-- 详细地址 -->
			<view class="info-item">
				<text class="info-label">详细地址</text>
				<u-input v-model="profileInfo.address" placeholder="请输入详细地址" input-align="right" />
			</view>


			<!-- 按钮组 -->
			<view class="button-group">
				<u-button type="primary" @click="handleSubmit" shape="circle" :loading="loading" :custom-style="btuStyle">
					保存
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color":"#ffffff"
				},
				avatarUrl: '/static/default-avatar.jpg', // 默认头像
				userName: 'XXX', // 用户名
				profileInfo: {
					name: '',
					position: '',
					phone: '',
					selectRegion: '',
					address: ''
				},
				// picker弹窗
				pickerShow: false,
				mode: "selector",
			}
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			getAddress() {
				this.$u.api.queryuseraddr({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('ad:', res)
					let baseinfo = res.data.base_info
					this.profileInfo.name = baseinfo.user_name
					this.profileInfo.phone = baseinfo.user_phoneno
					this.profileInfo.selectRegion = baseinfo.user_region
					this.profileInfo.address = baseinfo.user_addr					
				}).catch(err => {
					this.$u.toast('获取收件地址失败，请稍后再试！');
					return
				})
			},
			
			// 跳转修改密码页面
			ChangePassword() {
				uni.navigateTo({
					url: '/pages/Institution/organSetting/changepassword'
				})
			},

			// 绑定的微信列表
			wechatList() {
				uni.navigateTo({
					url: '/pages/Institution/organSetting/wechatList'
				})
			},

			// 修改手机号码
			changeIphone() {
				uni.navigateTo({
					url: '/pages/Institution/organSetting/changeIphone'
				})
			},

			// Picker弹窗
			showChange(type) {
				// 地区region
				this.mode = type;
				this.pickerShow = !this.pickerShow;
			},
			
			// picker选择选择确认
			confirm(e) {
				if (this.mode == 'selector') {
					// 赋值学历
					// this.profileInfo.Culture = this.range[e[0]];
				} else {
					// 赋值地区
					this.profileInfo.selectRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},
			
			// 保存收件地址
			handleSubmit() {
				this.loading = true
				this.$u.api.saveuseraddr({
					"usercode": uni.getStorageSync('usercode'), ////#用户code
					"username": this.profileInfo.name, ///#收件人用户名称
					"userphoneno": this.profileInfo.phone, ///#收件人用户手机号
					"userregion": this.profileInfo.selectRegion, ///#收件人用户地区
					"useraddr": this.profileInfo.address,///#收件人用户地址
				}).then(res => {
					console.log('保存地址：', res)	
					this.loading = false
				}).catch(err => {					
					this.$u.toast('保存失败！');
					return
				})
			}

	
		}
	}
</script>

<style lang="scss" scoped>
	.profile-container {
		padding: 30rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;

		.user-name {
			margin-top: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.info-list {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 30rpx;
		color: #606266;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		&.clickable:active {
			background-color: #f9f9f9;
		}

		.info-label {
			font-size: 28rpx;
			color: #666;
			margin-right: 20px;
		}

		.info-value {
			font-size: 28rpx;
			color: #333;
		}

		&:last-child {
			border-bottom: none;
			// padding: 13px 16px;
		}
	}

	// 使用穿透可能在微信小程序中不起作用， 可以加！important 进一步深度处理
	/deep/ .u-cell {
		padding: 0 !important;
		height: 60px;
	}

	.logout-btn {
		padding: 30rpx 0;
		text-align: center;
		color: #f56c6c;
		font-size: 30rpx;
		font-weight: 500;

		&:active {
			opacity: 0.8;
		}
	}

	.button-group {
		// display: flex;
		// justify-content: space-between;
		margin: 30rpx;

		// 此样式主要为了适配wx小程序的按钮
		/deep/ .u-size-default {
			width: 300px;
		}

		.u-btn {
			flex: 1;
		}
	}
</style>